<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>PTT relFinder Demo</title>
  <style>

  </style>
  <script><![CDATA[
    var fontWidth = 11;
    var URIquery = {};
    function init(){
      var drawer = new relationDrawer('svg_region');
      
      var googleQuery = 'http://www.google.com/search?q=';
      
      var relationArray = new Array();
      URIquery['chaogold'] = googleQuery + 'chaogold';
      URIquery['pg'] = googleQuery + 'pg';
      URIquery['kenny'] = googleQuery + 'kenny';
      
      relationArray[0] = new Relation('chaogold','同學','kenny');
      relationArray[1] = new Relation('kenny','喜歡','Mac');
      relationArray[2] = new Relation('Mac','製造商','Apple');
      relationArray[3] = new Relation('pg','討厭','Apple');
      
      drawer.draw( 'chaogold' , relationArray );
      
      var relationArray = new Array();
      relationArray[0] = new Relation('pg','同學','atom');
      relationArray[1] = new Relation('kenny','朋友','atom');
      
      drawer.draw( 'pg' , relationArray );
      
      var relationArray = new Array();
      relationArray[0] = new Relation('kenny','有','wii');
      relationArray[1] = new Relation('Nintendo','製造','wii');
      relationArray[2] = new Relation('Nintendo','製造','NDS');
      relationArray[3] = new Relation('DQ9','主機平台','NDS');
      
      drawer.draw( 'kenny' , relationArray );
    }
    function relationDrawer(id){
      this.svg_id = id;
      this.y = 0;
      this.draw = function ( leftMostRes , relationArray ){
        drawRelationPath(id,leftMostRes , relationArray , 0 , 1000 , this.y);
        this.y += 60;
      };
    } 
    function Relation (_res1,_relation,_res2) {
      this.res1 = _res1;
      this.relation = _relation;
      this.res2 = _res2;
    }
    function drawRelationPath(id,src,relationArray,xmin,xmax,y){
      var slotWidth = (xmax-xmin - src.length*fontWidth)/relationArray.length;
      var XL = 5 + svgTextRectangle(id,src,xmin+5,y+18+5,'black','yellow',18);
      var XR;
      var lres = src;
      var rres;
      var LtoR;
      for(var i = 0 ; i<relationArray.length ; ++i){
        XR = XL + slotWidth;
        if( relationArray[i].res1 == lres ){
          rres = relationArray[i].res2;
          LtoR = true;
        }
        else{
          rres = relationArray[i].res1;
          LtoR = false;
        }
        drawSingleRelation(id,relationArray[i].relation,rres,XL,XR,y,LtoR);
        lres = rres;
        XL = XR;
      }
    }
    function drawSingleRelation( id , relation , res2 , xmin , xmax , y , isLeftToRight ){
      var xmiddle = (xmin+xmax)/2;
      var xbound = xmin+5;
      var textY = y + 18+5;
      var arrowY = y + 16;
      var relationTextY = arrowY + 18;
      var relation_wid = relation.length * fontWidth;
      var res2_wid = res2.length * fontWidth;
      if(isLeftToRight){
        svgArrow(id,xbound ,arrowY , xmax-res2_wid-15 , arrowY  );
      }
      else{
        svgArrow(id,xmax-res2_wid , arrowY ,xbound+15 ,arrowY  );
      }
      xbound = svgTextRectangle(id,res2,xmax-res2_wid,textY,'black','yellow',18);
      svgText(id,relation,xmiddle-relation_wid-5 , relationTextY , 'blue' , 18);
    }
    function drawTriple( id , res1 , relation , res2 , xmin , xmax , y , isLeftToRight){
      var xmiddle = (xmin+xmax)/2;
      var xbound;
      var textY = y + 18+5;
      var arrowY = y + 16;
      var relationTextY = arrowY + 18;
      var relation_wid = relation.length * fontWidth;
      var res1_wid = res1.length * fontWidth;
      var res2_wid = res2.length * fontWidth;
      xbound = 5 +svgTextRectangle(id,res1,xmin+5,textY,'black','yellow',18);
      if(isLeftToRight){
        svgArrow(id,xbound ,arrowY , xmax-res2_wid-15 , arrowY  );
      }
      else{
        svgArrow(id,xmax-res2_wid , arrowY ,xbound+15 ,arrowY  );
      }
      xbound = svgTextRectangle(id,res2,xmax-res2_wid,textY,'black','yellow',18);
      svgText(id,relation,xmiddle-relation_wid/2-5 , relationTextY , 'blue' , 18);
    }
    function svgTextRectangle( id , text, x,y, textColor, bgColor,fontSize ){
      var spacing = 5;
      var width = text.length * fontWidth + 2*spacing;
      var height = fontSize+2*spacing;
      svgRoundRectangle( id, x-spacing , y-fontSize-spacing/2 , width , height , bgColor );
      svgText( id, text, x, y,textColor,fontSize );
      return x-spacing+width;
    }
    function svgText( id, text, x , y ,color , fontsize){
      var newElem = document.createElementNS("http://www.w3.org/2000/svg" ,'text');
      newElem.setAttribute( 'x',x );
      newElem.setAttribute( 'y',y );
      newElem.setAttribute( 'font-size',fontsize);
      //newElem.setAttribute( 'font-family','Courier New');
      newElem.setAttribute( 'style','fill:'+color );
      newElem.appendChild( document.createTextNode( text ) );
      var hyperLinkTag = document.createElementNS( 'http://www.w3.org/2000/svg' , 'a' );
      hyperLinkTag.setAttributeNS( "http://www.w3.org/1999/xlink", 'xlink:href', URIquery[text]  );
      hyperLinkTag.setAttributeNS( null , 'target','_blank');
      hyperLinkTag.appendChild(newElem);
      document.getElementById(id).appendChild(hyperLinkTag);
    }
    function svgRoundRectangle( id , x,y,width,height,color ){
      var newRect = document.createElementNS("http://www.w3.org/2000/svg" ,'rect');
      newRect.setAttribute('x',x);
      newRect.setAttribute('y',y);
      newRect.setAttribute('height',height);
      newRect.setAttribute('width',width);
      newRect.setAttribute('rx',8);
      newRect.setAttribute('ry',8);
      newRect.setAttribute('style','stroke:black; stroke-width:2; fill:'+color);
      document.getElementById(id).appendChild( newRect );
    }
    function svgArrow( id,x1,y1,x2,y2 ){
      var newLine = document.createElementNS("http://www.w3.org/2000/svg" ,'line' );
      newLine.setAttribute('x1',x1);
      newLine.setAttribute('y1',y1);
      newLine.setAttribute('x2',x2);
      newLine.setAttribute('y2',y2);
      newLine.setAttribute('style',"fill:none;stroke:black;stroke-width:3;");
      newLine.setAttributeNS(null,'marker-end',"url(#myMarker)");
      document.getElementById(id).appendChild( newLine );
    }
    function svgLine( id,x1, y1, x2, y2 ){
      var newLine = document.createElementNS("http://www.w3.org/2000/svg" ,'line' );
      newLine.setAttribute('x1',x1);
      newLine.setAttribute('y1',y1);
      newLine.setAttribute('x2',x2);
      newLine.setAttribute('y2',y2);
      newLine.setAttribute('style',"fill:none;stroke:black;stroke-width:3;");
      document.getElementById(id).appendChild( newLine );
    }
  ]]></script>
</head>
<body id="body" onload='init();' style='text-align:center;'>
  <svg id='svg_region' version="1.1"
    baseProfile="full"
    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
    style='height:100%;width:100%;position:absolute; top:0; left:0; '>
    <defs>
      <marker id="myMarker" viewBox="0 0 10 10" refX="1" refY="5" 
        markerUnits="strokeWidth" orient="auto"
        markerWidth="4" markerHeight="3">
        <polyline points="0,0 10,5 0,10 1,5" fill="black" />
      </marker>
    </defs>  
  </svg>

</body>
</html>
